<template>
	<view class="bind-account-container">
		<view class="cell">
			<u-cell-group :border="false">
				<u-cell title="真实姓名" isLink
					:titleStyle="{'font-size' : '28rpx', 'color': '#777777', width: '200rpx'}">
					<template #value>
						<input placeholder="请输入姓名" class="input" :value="formData.accountName" @input="updateAccountName" />
					</template>
				</u-cell>
				<u-cell title="支付宝账号" isLink :border="false"
					:titleStyle="{'font-size' : '28rpx', 'color': '#777777', width: '200rpx'}">
					<template #value>
						<input placeholder="请输入支付宝手机号" class="input" :value="formData.accountNumber" @input="updateAccountNumber" />
					</template>
				</u-cell>
			</u-cell-group>
		</view>

		<!-- 保存按钮 -->
		<view class="confirm-btn" @click="saveAccount">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					id: '',
					payChannel: "alipay", // 提现渠道,固定为支付宝
					accountName: "", // 姓名
					accountNumber: "", // 支付宝账号
					isDefault: true, // 是否默认提现账号，固定为true
				},
				loading: false
			}
		},
		onLoad() {
			this.getDefaultAccount();
		},
		methods: {
			// 手动更新输入值，避免v-model可能的响应式问题
			updateAccountName(e) {
				this.formData.accountName = e.detail.value;
			},
			updateAccountNumber(e) {
				this.formData.accountNumber = e.detail.value;
			},
			getDefaultAccount() {
				this.loading = true;
				this.$http_api.getWithdrawalAccount({}).then(res => {
					this.formData = {
						id: res.id || '',
						payChannel: res.payChannel || "alipay",
						accountName: res.accountName || "",
						accountNumber: res.accountNumber || "",
						isDefault: res.isDefault !== undefined ? res.isDefault : true
					};
				}).finally(() => {
					this.loading = false;
				})
			},
			saveAccount() {
				if (!this.formData.accountName || !this.formData.accountNumber) {
					uni.$u.toast('请填写完整信息');
					return;
				}
				
				if (this.loading) return;
				this.loading = true;
				
				// 判断是编辑还是新增
				const apiMethod = this.formData.id ? 
					this.$http_api.editWithdrawalAccount : 
					this.$http_api.addWithdrawalAccount;
				
				apiMethod(this.formData).then(res => {
					uni.setStorageSync('withdrawalAccount', this.formData);
					uni.$u.toast('保存成功');
					// 保存成功后返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}).catch(err => {
					console.error('保存失败:', err);
					uni.$u.toast('保存失败，请重试');
				}).finally(() => {
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bind-account-container {
		padding: 20rpx;


		.cell {
			background: #ffffff;
			border-radius: 20rpx;
			color: #777777;
		}

		.input {
			font-size: 25rpx;
			color: #AAAAAA;
			text-align: right;
		}

		.confirm-btn {
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			padding: 25rpx;
			background-color: #1C6EFB;
			color: #ffffff;
			border-radius: 50rpx;
			text-align: center;
			font-size: 30rpx;
			width: 80%;
			font-weight: 400;
		}

	}
</style>